<template>
	<view class="page">
		<!-- <yu-kefu></yu-kefu> -->

		<!-- banner -->
		<bw-swiper :swiperList="swiperList" swiperHeight="630"  style="width:100%" @clickItem="clickItem" :textTip="true"></bw-swiper>

		<!-- 首页 -->
		<view class="flex-colum-start"
			style="padding: 16rpx;box-sizing: border-box;margin-bottom: 152rpx;box-sizing: border-box;">
			<text style="font-size:32rpx;">{{name}}</text>
			<view class="flex-row-start" style="margin-top: 20rpx;" v-if="isHasInviteCode">
				<text style="margin-right: 20rpx;color: #FF4D4F;font-size: 32rpx;">¥ {{final_price}}</text>
				<text
					style="margin-right: 20rpx;color: #9CA3AF; font-size: 28rpx;text-align: center;text-decoration:line-through">¥ {{price}}</text>
				<text
					style="background: rgba(255, 77, 79, 0.1);font-size: 24rpx;width: 80px;width: 95rpx;height: 40rpx;text-align: center;">{{getDiscount}}折</text>
			</view>
			<view class="flex-row-start" style="margin-top: 20rpx;" v-else>
				<text style="margin-right: 20rpx;color: #FF4D4F;font-size: 32rpx;">¥ {{price}}</text>
			</view>

			<view class="flex-row-between" style="margin-top: 20rpx;width: 100%;">

				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #6B7280;">预计返款：</text>
					<text style="font-size: 28rpx;color: #6B7280;">¥200</text>
				</view>
				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #6B7280;">推广额度：</text>
					<text style="font-size: 28rpx;color: #6B7280;">0/{{stock}}</text>
				</view>

			</view>

			<!-- 领取优惠券 -->
			<view class="flex-colum-start" style="width: 100%;margin-top: 20rpx;"  v-if="coupons.length>0">
				<text style="margin-bottom: 10rpx;font-size: 32rpx;">领取优惠券</text>
				<view class="flex-row-start" style="width: 100%;">
					<view @click="couponsClick(item.url)" v-for="(item,index) in coupons" :key="index" class="flex-row-event"
						style="width: 216rpx;height: 96rpx;background-color: #EF4444;border-radius: 8rpx;margin-right: 20rpx">
						<image src="@/static/img/1.jpg" mode="" style="width: 40rpx;height: 26rpx;"></image>
						<text style="color:white;font-size: 28rpx;"> {{item.platName}}</text>
					</view>
				</view>
			</view>


			<!-- 凑单 -->
			<view class="flex-colum-start" style="width: 100%;margin-top: 20rpx;" v-if="additionalProducts.length>0">
				<text style="margin-bottom: 10rpx;font-size: 32rpx;">凑单</text>
				<view class="flex-row-start" style="width: 100%;">
					<view @click="additionalProductsClick(item.url)" v-for="(item,index) in additionalProducts" :key="index" class="flex-row-event"
						style="width: 216rpx;height: 96rpx;background-color: #EF4444;border-radius: 8rpx;margin-right: 20rpx;">
						<image src="@/static/img/2.jpg" mode="" style="width: 40rpx;height: 26rpx;"></image>
						<text style="color:white;font-size: 28rpx;">{{item.platName}}</text>
					</view>
				</view>
			</view>
			<text
				style="color: #FF4D4F;margin-top: 20rpx;font-size: 40rpx;border-color:  #FF4D4F; border-width: 0 0 2px 0;border-style: solid;">商品详情</text>
			<!-- //富文本 -->
			<rich-text :nodes="description" style="margin-top: 20rpx;"></rich-text>

		</view>


		<view class=""
			style="width: 100%;background-color: #F9FAFB;box-sizing: border-box;padding: 32rpx;height: 152rpx;display: flex;justify-content: space-evenly;align-items: center;position: fixed;bottom: 10rpx;left: 0;">
			<view @click="kouling" class=""
				style="border-radius: 8rpx;width: 30%;height: 100%;background-color:  #FF4D4F;line-height: 152rpx;color: #FFFFFF;display: flex;justify-content: center;align-items: center">
				购买口令
			</view>
			<view class=""
				style="border-radius: 8rpx;width: 30%;height: 100%;border: 1px solid #FF4D4F;line-height: 152rpx;display: flex;justify-content: center;align-items: center;color:#FF4D4F ;"
				@click="downloadResource">
				下载资源
			</view>
			<view class=""
				style="border-radius: 8rpx;width: 30%;height: 100%;border: 1px solid #FF4D4F;line-height: 152rpx;display: flex;justify-content: center;align-items: center;color:#FF4D4F ;"
				@click="toSubmit">
				提交报单
			</view>
		</view>

	</view>
</template>

<!-- 注：口令复制到剪贴板，凑单 和 优惠券跳转链接  -->
<script>
	import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue'

	export default {
		components: {

			bwSwiper

		},
		data() {
			return {
				productId:"",
				name: "索尼 WF-1000XM5 降噪豆 真无线蓝牙耳机主动降噪 通话降噪",
				cost_price: "", //成本价
				final_price: "", //最终价格
				price: "", //商品价格（原始）
				total_activity_amount: "", //活动总金额
				discount: "", //商品折扣
				stock: "", //商品库存
				statgeId:"",
				swiperList: [
					// {
					// 	img: require('../../static/img/product/erji.jpg')
					// 	// text: '商家入驻'
					// },
					// {
					// 	img: require('../../static/img/product/erji.jpg')
					// 	// text: '办理执照'
					// }
				],
				codes: [],//口令
				additionalProducts: [], //凑单
				coupons:[], //优惠券
				
				
				platformList:[],
				description: '<div class="product-detail"><h3 class="product-title">【全新升级】索尼 WF-1000XM5 真无线降噪耳机</h3><p class="product-subtitle">• 全新集成处理器 V2，降噪效果提升 20%</p><p class="product-subtitle">• 全新 Dynamic Driver X 单元，音质更加细腻/p><p class="product-subtitle">• 支持 LDAC™ 高解析度音频传输</p>'
			}
		},
		computed: {

			getDiscount: function() {
				var discount = this.discount;
				return discount * 10;
			},

			isHasInviteCode: function() {
				var invite_code = uni.getStorageSync('invite_code');
				return invite_code ? true : false;
				// return false;
			},
		

		},
		onLoad(option) {

			console.log('option.productId', productId);
			var productId = option.productId;
			this.productId = productId;
			this.getProductDetail(productId);
			
		},
		filters:{
		
		
			
		},
		methods: {
		

			async getProductDetail(id) {
				var that = this;
				return new Promise((resolve,reject)=>{
					
					this.$pin.request('GET', `/products/${id}`, null, successData => {
						console.log(successData)
						if (successData.code == 2000) {
							var data = successData.data;
					
							//轮播图
							var imageIds = data.images;
							imageIds.map((item, index) => {
								console.log("图片:" + item)
								var imageId = item.id;
								var title = item.title;
					
								//获取图片
								that.$pin.request("GET", `/assets/${imageId}/link`, null, res => {
									console.log("successt图片:" + res.data)
									var img = res.data;
									that.swiperList.push({
										img
									})
					
								}, error => {})
					
					
							});
							that.discount = data.discount;
							that.name = data.name;
							that.final_price = data.final_price;
							that.price = data.price;
							that.description = data.description;
							that.stock = data.stock;
							that.statgeId = data.stage_id;
							
							
							// that.additionalProducts = data.additional_products;
							// that.coupons = data.coupons;
						
						
							that.$pin.request('GET', `/platform`, null, successData2 => {
								if(successData2.code = that.$pin.code.success){
									var platformList = successData2.data;
									data.additional_products.map(res=>{
										platformList.map(v=>{
											if(res.platform_id == v.id){
												res.platName = v.name;
											}
											
										})
									})
									
									data.coupons.map(res=>{
										platformList.map(v=>{
											if(res.platform_id == v.id){
												res.platName = v.name;
											}
											
										})
									})
									
									data.codes.map(res=>{
										platformList.map(v=>{
											if(res.platform_id == v.id){
												res.platName = v.name;
											}
											
										})
									})
							
									that.additionalProducts = data.additional_products;
									that.coupons = data.coupons;
									that.codes = data.codes;
									
								}else{
									
								}
							},fail=>{
							})
							
						} else {
					
						}
					}, failData => {
					
					})
					
				})
				
			},

			downloadResource(e) {
				var text = this.extractTextFromHtml(this.description);
		

				uni.setClipboardData({
					data: text,
					success: function(e) {
						console.log('success:' + e);
						uni.showToast({
							title: "复制成功",
							icon: "success"
						})
					}
				});
				this.downloadPicture();

			},
			toSubmit(e) {
				uni.navigateTo({
					url:'/pages/commission-list/commission-list?statgeId='+this.statgeId+'&product_id='+this.productId
					// url: '../submit-form/submit-form?statgeId='+this.statgeId+'&product_id='+this.productId
				})
			},
			downloadPicture() {
				var that = this;

				uni.getSetting({
					success: (res) => {
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									that.swiperList.map((item, index) => {
										console.log("图片路径：" + item)
										uni.downloadFile({
											url: item.img,//"https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg",
											success: (res) => {
												console.log(res);
										
												uni.saveImageToPhotosAlbum({
													filePath: res
														.tempFilePath,
													success: () => {
														uni.showToast({
															title: "图片下载成功"
														})
													},
													fail: () => {
														uni.showToast({
															icon: 'error',
															title: "图片下载失败"
														})
													}
												})
											}
										})
									})
								},
								fail: () => {
									uni.hideLoading();
									uni.showModal({
										title: "您已拒绝获取相册权限",
										content: "是否进入权限管理，调整授权？",
										success: (res) => {
											if (res.confirm) {
												//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
												uni.openSetting({
													success: (res) => {
														console.log(res
															.authSetting
														);
													},
												});
											} else if (res.cancel) {
												return uni.showToast({
													title: "已取消！",
												});
											}
										},
									});
								},
							})

						} else {
							
							that.swiperList.map((item, index) => {
								//如果已有相册权限，直接保存图片到系统相册
								uni.downloadFile({
									url: item.img,//"https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg",
									success: (res) => {
										console.log(res);
								
										uni.saveImageToPhotosAlbum({
											filePath: res
												.tempFilePath,
											success: () => {
												uni.showToast({
													title: "下载成功"
												})
											},
											fail: () => {
												uni.showToast({
													icon: 'error',
													title: "下载失败"
												})
											}
										})
									}
								})
							})
						}
						
					}


				})

			},
			extractTextFromHtml(html) {
				return html.replace(/<[^>]*>/g, '');
			},
			additionalProductsClick(url){
				
				uni.navigateTo({
					url: "/pages/webTest/webTest?src="+url
				})
			},
			couponsClick(url) {
				uni.navigateTo({
					url: "/pages/webTest/webTest?src="+url
				})
	
				// var that = this;
				// uni.showActionSheet({
				// 	itemList: that.getPlatformButtonList, //["京东", "淘宝", "拼多多"],
				// 	success: function(res) {
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 		// var buttonIndex =  + 1;
				// 		switch (res.tapIndex) {
				// 			case 0:
				// 				uni.navigateTo({
				// 					url: "/pages/webTest/webTest"
				// 				})
				// 				break;
				// 			case 1:
				// 				uni.navigateTo({
				// 					url: "/pages/webTest/webTest"
				// 				})
				// 				break;
				// 			case 2:
				// 				uni.navigateTo({
				// 					url: "/pages/webTest/webTest"
				// 				})
				// 				break;

				// 			default:
				// 				break;
				// 		}
				// 	},
				// 	fail: function(res) {
				// 		console.log(res.errMsg);
				// 	}
				// });



			},
			kouling() {
				
				var that = this;
				var platformButtonList  = [];
				var codesList = []
				
				if(that.codes.length>0){
					that.codes.map(res=>{
						var platform_id = res.platform_id;
						var code = res.code;
						var name = res.platName;
						platformButtonList.push(name);
						codesList.push({
							platform_id,
							code,
							name
						})
					})	
				}else{
					return;
				}
				
				
				uni.showActionSheet({
					itemList: platformButtonList,
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						
						var code = ""
						var platName = platformButtonList[res.tapIndex];
						
						codesList.map(res=>{
							if(res.name == platName){
								code = res.code
							}
						})
						
						
						uni.setClipboardData({
							data: code,
							success: function(e) {
								console.log('success:' + e);
								uni.showModal({
									title: platName+"口令",
									content:code,
									showCancel:false,
									confirmText:"关闭"
								})
							}
						});
						
						
						
						// var buttonIndex =  + 1;
						// switch (res.tapIndex) {
						// 	case 0:
						// 		uni.setClipboardData({
						// 			data: "富士山下,樱花盛开",
						// 			success: function(e) {
						// 				console.log('success:' + e);
						// 				uni.showModal({
						// 					title: "京东口令",
						// 					content: "富士山下,樱花盛开",
						// 					showCancel:false,
						// 					confirmText:"关闭"
						// 				})
						// 			}
						// 		});
						// 		break;
						// 	case 1:
						// 		uni.setClipboardData({
						// 			data: "富士山下,樱花盛开",
						// 			success: function(e) {
						// 				console.log('success:' + e);
						// 				uni.showModal({
						// 					title: "淘宝口令",
						// 					content: "富士山下,樱花盛开",
						// 					showCancel:false,
						// 					confirmText:"关闭"
						// 				})
						// 			}
						// 		});
						// 		break;
						// 	case 2:
						// 		uni.setClipboardData({
						// 			data: "富士山下,樱花盛开",
						// 			success: function(e) {
						// 				console.log('success:' + e);
						// 				uni.showModal({
						// 					title: "拼多多口令",
						// 					content: "富士山下,樱花盛开",
						// 					showCancel:false,
						// 					confirmText:"关闭"
						// 				})
						// 			}
						// 		});
						// 		break;

						// 	default:
						// 		break;
						// }
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});


			}
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100vh;
		overflow: scroll;

		.commonItem {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;

			.itemCon {
				width: 100%;
				display: flex;
				flex-direction: column;


				.itemDetail {
					width: 100%;
					display: flex;
					align-items: center;
					height: 100rpx;
					border-bottom: 1px solid #C8C7CC;

					text {
						margin-right: 20px;
					}
				}

			}
		}

	}
</style>